const header = document.querySelector('header')//获取header
window.addEventListener('scroll',()=>{
    //拖动滚动条到一定距离，给header加上一个类名
    //console.log(scrollY);//window.scrollY window可省略 打印后可出现滚动条数值
    if(scrollY>200){//如果移动超过这个范围 就添加一个动画效果 没有就移除掉
        header.classList.add('active')
    }else{
        header.classList.remove('active')
    }
})
//过渡动画分别从左下右方进入界面
//动画（transition）过渡：默认状态下，是透明度0 在对应左下右，加载后在起始位置
const items=document.querySelectorAll('[data-reveal]')
function revealCB(){
    items.forEach((item) => {
        //item.getBoundingClientRect()距离上下左右的值 加.top就是距顶部距离
        //window.innerHeight代表一屏高度
        if(item.getBoundingClientRect().top<window.innerHeight-50){//后可以添加具体数值 比如-100
            item.classList.add('revealed')//在每一个item下添加 所以注意这是item不是items
        }
})}
window.addEventListener('load',revealCB)//添加加载触发
window.addEventListener('scroll',revealCB)//添加滚动条触发